<!doctype html>
<html lang="zh" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico"/>
    <!-- Generated: 2018-04-06 16:27:42 +0200 -->
    <title>教师资讯列表</title>

    <!-- Dashboard Core -->
    <link href="./assets/css/dashboard.css" rel="stylesheet"/>
    <script src="./assets/js/dashboard.js"></script>
    <!-- c3.js Charts Plugin -->
    <link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet"/>
    <script src="./assets/plugins/charts-c3/plugin.js"></script>
    <!-- Google Maps Plugin -->
    <link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet"/>
    <script src="./assets/plugins/maps-google/plugin.js"></script>
    <!-- Input Mask Plugin -->
    <script src="./assets/plugins/input-mask/plugin.js"></script>
</head>

<body class="">
<div class="page">
    <div class="page-main">

        <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-1 ml-auto">
                        <a href="login" class="btn btn-blue">退出</a>
                    </div>
                    <div class="col-lg order-lg-first">
                        <ul class="nav nav-tabs border-0 flex-column flex-lg-row">
                            <li class="nav-item">
                                <a href="./index" class="nav-link "><i class="fe fe-home"></i>首页</a>
                            </li>

                            <li class="nav-item">
                                <a href="./newslist" class="nav-link active"><i class="fe fe-box"></i>
                                    教师资讯</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="./courseList" class="nav-link"><i class="fe fe-calendar"></i>
                                    现有课程</a>

                            </li>

                            <li class="nav-item dropdown">
                                <a href="./addCourse" class="nav-link"><i class="fe fe-check-square"></i>新增课程</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="./upCourse" class="nav-link"><i
                                        class="fe fe-check-square"></i>修改课程</a>
                            </li>
                            <li class="nav-item">
                                <a href="./user" class="nav-link"><i class="fe fe-image"></i>个人信息</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="page-header">
                    <h1 class="page-title">
                        教师资讯列表
                    </h1>
                </div>
                <div class="row row-cards row-deck" id="app">


                    <div class="col-lg-4" v-for="(item, index) in list" :key="index">
                        <div class="card">
                            <div class="card-body d-flex flex-column">
                                <h4><a :href="'news/'+item.newsId" v-text="item.newsTitle"></a></h4>
                                <div class="d-flex align-items-center pt-5 mt-auto">
                                    <div>
                                        <small class="d-block text-muted" v-text="item.newsDate"></small>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <footer class="footer">
        <div class="container">
            <div class="row align-items-center flex-row-reverse">
                <div class="col-auto ml-lg-auto">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <ul class="list-inline list-inline-dots mb-0">
                                <li class="list-inline-item"><a href="#">教师系统</a></li>
                                <li class="list-inline-item"><a href="#">@2019</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </footer>
</div>
</body>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                list: null
            }
        },
        created() {
            axios.get("/onlineTeacher/api/newsList").then(response => (this.list = response["data"]["data"]))
        },


    })


</script>

</html>